<template>
  <!-- <img src="/Imgs/1.jpg" alt="haha"> -->
  <el-table :data="good_tableDate" border stripe style="width: 100%">
    <el-table-column type="index"> </el-table-column>
    <el-table-column prop="shopId" label="商品ID"> </el-table-column>
    <el-table-column prop="shopName" label="商品名称"> </el-table-column>
    <el-table-column prop="shopPrice" label="商品单价"> </el-table-column>
    <el-table-column  prop="shopState" label="商品状态" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="shopStock" label="商品库存"> </el-table-column>
    <el-table-column prop="shopTime" label="商品上架时间">
      <template slot-scope="scope">
        {{ new Date(scope.row.shopTime).toLocaleString() }}
      </template>
    </el-table-column>
    <!-- <el-table-column prop="shopCategoryId" label="商品类型">
            </el-table-column> -->
    <el-table-column prop="shopDescription" label="商品描述"> </el-table-column>
    <el-table-column label="商品简图">
      <template slot-scope="scope">
        <img
          :src="scope.row.imageIds[0].imagePath"
          min-width="70"
          height="70"
        />
      </template>
    </el-table-column>
    <el-table-column prop="goodset" label="操作">
      <template slot-scope="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="showEditMessage(scope.$index)"
        ></el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  created() {
    //调用拿砍价商品的接口
    this.getGoodList()
  },
  data() {
    return {
      //存放商品数据的容器
      good_tableDate: [],
    }
  },
  methods: {
    //格式化表格数据
    formatter(row, column) {
      if (row.shopState == 1) {
        return '上架'
      } else if (row.shopState == 3) {
        return '砍价中。。'
      }
    },
    //商品的显示
    getGoodList() {
      this.axios
        .get('https://localhost:44379/api/BargainPc/GetBargainShop',
        )
        .then((res) => {
          //限时完成后的回调
          this.good_tableDate = res.data.data
        })
    },
  },
}
</script>
